@bg1: '../../img/electricAlarmBg1.png';
@bg2: '../../img/electricAlarmBg2.png';
@icon1: '../../img/electricIcon1.png';
@icon2: '../../img/electricIcon2.png';
.root {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  .box {
    width: 92px;
    height: 101px;
    position: relative;
    background: #eee;
    background: url(@bg1) no-repeat center center;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    .title {
      font-size: 12px;
      color: #666;
      margin: 0;
    }
    .number {
      font-size: 16px;
      color: #333;
      font-weight: bold;
      margin: 0;
    }
    &::before {
      content: '';
      width: 32px;
      height: 32px;
      background: url(@icon1) no-repeat center center;
      background-size: 100% 100%;
      position: absolute;
      left: 0;
      top: 0;
    }
  }
  .active {
    background: url(@bg2) no-repeat center center;
    &::before {
      background: url(@icon2) no-repeat center center;
    }
  }
}
